<template> 
  <div class="body">
    <!-- 顶部导航 -->
    <div class="header-tabs">
      <div 
        :class="['tab', { active: currentTab === 'forum' }]" 
        @click="switchTab('forum')"
      >
        论坛
      </div>
      <div 
        :class="['tab', { active: currentTab === 'myPosts' }]" 
        @click="switchTab('myPosts')"
      >
        我的帖子
      </div>
    </div>

    <!-- 通知消息 -->
    <div v-if="message" :class="['message', messageType]">
      {{ message }}
    </div>

    <div class="news-container" ref="newsContainer">
      <!-- 论坛部分 -->
      <div v-if="currentTab === 'forum'">
        <!-- 排序选项 -->
        <div class="sort-options">
          <label>
            排序方式：
            <select v-model="sortByForum" @change="refreshForumNews">
              <option value="date">时间</option>
              <option value="likes">点赞数</option>
            </select>
          </label>
        </div>

        <transition-group name="fade" tag="div" class="news-list">
          <div
            v-for="(item, index) in forumNewsItems"
            :key="item.id"
            class="news-item"
            :style="{ '--animation-delay': `${index * 0.1}s` }"
          >
            <div class="news-content-container">
              <!-- 条件渲染图片 -->
              <img 
                v-if="item.image_url" 
                :src="item.image_url" 
                alt="新闻图片" 
                class="news-image" 
              />

              <div class="news-content">
                <h3 class="news-title">{{ item.title }}</h3>
                <p class="news-summary">{{ truncateSummary(item.summary) }}</p>
                <div class="news-meta">
                  <span class="news-author">{{ item.author }}</span>
                  <span class="news-date">{{ formatDate(item.date) }}</span>
                </div>
              </div>
            </div>
            <!-- 操作按钮 -->
            <div class="news-actions">
              <button 
                @click="checkLoginAndExecute(() => likeNews(item))" 
                class="like-button"
                :disabled="likedNewsIds.includes(item.id)"
              >
                <i class="fas fa-thumbs-up"></i> {{ item.likes }}
              </button>
              <button @click="checkLoginAndExecute(() => favoriteNews(item.id))" class="favorite-button">
                <i class="fas fa-star"></i>收藏
              </button>

              <button 
                @click="openCommentsModal(item)"
                class="comment-button"
              >
                <i class="fas fa-comments"></i> 评论
              </button>

              <a
                :href="item.link"
                target="_blank"
                rel="noopener noreferrer"
                class="details-button"
              >
                详情
              </a>
            </div>
          </div>
        </transition-group>
        <div class="pagination-container">
          <button
            v-if="forumPage > 1"
            @click="changeForumPage(forumPage - 1)"
            class="pagination-btn"
          >
            上一页
          </button>
          <span class="page-number">当前第 {{ forumPage }} 页</span>
          <button
            v-if="forumHasMoreItems"
            @click="changeForumPage(forumPage + 1)"
            class="pagination-btn"
          >
            下一页
          </button>
        </div>
      </div>

      <!-- 我的帖子部分 -->
      <div v-else-if="currentTab === 'myPosts'">
        <!-- 发布按钮 -->
        <div class="news-header-container">
          <button class="publish-button" @click="handlePublishClick">
            <i class="fas fa-plus"></i> 发布
          </button>
        </div>

          <!-- 发布新闻表单，初始隐藏 -->
          <div v-if="showPublishForm" class="news-submit-form">
          <h2>发布帖子</h2>
          <form @submit.prevent="submitNews">
            <div class="form-group">
              <label for="title">标题*</label>
              <input type="text" id="title" v-model="newNews.title" required />
            </div>
            <!-- 修改摘要字段的标签为“内容” -->
            <div class="form-group">
              <label for="summary">内容*</label>
              <textarea id="summary" v-model="newNews.summary" required></textarea>
            </div>
            <!-- 添加图片上传字段 -->
            <div class="form-group">
              <label for="image">上传图片</label>
              <!-- 自定义文件输入 -->
              <div class="custom-file-input">
                <input type="file" id="image" @change="handleImageSelection" accept="image/*" ref="imageInput" />
                <button type="button" class="select-file-button" @click="triggerFileInput">
                  <i class="fas fa-upload"></i> 选择文件
                </button>
                <span class="file-name">{{ selectedFileName }}</span>
              </div>
              <!-- 显示图片预览 -->
              <div v-if="previewImage" class="image-preview">
                <img :src="previewImage" alt="图片预览" class="preview-img" />
                <button type="button" @click="removeImage" class="remove-image-btn">
                  <i class="fas fa-times"></i>
                </button>
              </div>
            </div>
            <!-- 移除内容字段 -->
            <div class="form-group">
              <label for="link">链接</label>
              <input type="url" id="link" v-model="newNews.link" />
            </div>
            <div class="button-container">
              <button type="submit" class="submit-button1">发送</button>
              <button type="button" class="cancel-button1" @click="cancelPublish">取消</button>
            </div>
          </form>
        </div>

        <!-- 排序选项 -->
        <div class="sort-options">
          <label>
            排序方式：
            <select v-model="sortByMyPosts" @change="refreshMyPosts">
              <option value="date">时间</option>
              <option value="likes">点赞数</option>
            </select>
          </label>
        </div>

        <!-- 使用 transition-group 处理列表动画 -->
        <transition-group name="fade" tag="div" class="news-list">
          <div
            v-for="(item, index) in myPostsItems"
            :key="item.id"
            class="news-item"
            :style="{ '--animation-delay': `${index * 0.1}s` }"
            @mouseenter="hoveredItem = item.id"
            @mouseleave="hoveredItem = null"
          >
            <div class="news-content-container">
              <!-- 条件渲染图片 -->
              <img 
                v-if="item.image_url" 
                :src="item.image_url" 
                alt="新闻图片" 
                class="news-image" 
              />

              <div class="news-content">
                <h3 class="news-title">{{ item.title }}</h3>
                <p class="news-summary">{{ truncateSummary(item.summary) }}</p>
                <div class="news-meta">
                  <span class="news-date">{{ formatDate(item.date) }}</span>
                  <span :class="statusClass(item.flag)">
                    {{ statusText(item.flag) }}
                  </span>
                </div>
              </div>
            </div>
            <!-- 操作按钮 -->
            <div class="news-actions">
              <button 
                @click="checkLoginAndExecute(() => likeNews(item))" 
                class="like-button"
                :disabled="likedNewsIds.includes(item.id)"
              >
                <i class="fas fa-thumbs-up"></i> {{ item.likes }}
              </button>
              <button @click="checkLoginAndExecute(() => favoriteNews(item.id))" class="favorite-button">
                <i class="fas fa-star"></i>收藏
              </button>

              <button 
                @click="openCommentsModal(item)"
                class="comment-button"
              >
                <i class="fas fa-comments"></i> 评论
              </button>

              <a
                :href="item.link"
                target="_blank"
                rel="noopener noreferrer"
                class="details-button"
              >
                详情
              </a>
            </div>
            <!-- 删除按钮 -->
            <div class="delete-button" v-if="hoveredItem === item.id" @click="deletePost(item.id)">
              <i class="fas fa-trash-alt"></i>
            </div>
          </div>
        </transition-group>
        <div class="pagination-container">
          <button
            v-if="myPostsPage > 1"
            @click="changeMyPostsPage(myPostsPage - 1)"
            class="pagination-btn"
          >
            上一页
          </button>
          <span class="page-number">当前第 {{ myPostsPage }} 页</span>
          <button
            v-if="myPostsHasMoreItems"
            @click="changeMyPostsPage(myPostsPage + 1)"
            class="pagination-btn"
          >
            下一页
          </button>
        </div>
        <p v-if="error" class="error-message">{{ error }}</p>
      </div>
    </div>

    <!-- 评论模态框 -->
    <div v-if="showCommentsModal" class="modal-overlay" @click.self="closeCommentsModal">
      <div class="modal-content">
        <span class="close-button" @click="closeCommentsModal">&times;</span>
        <h2>评论</h2>
        <div class="comments-list">
          <div v-if="approvedComments.length === 0">
            暂无评论。
          </div>
          <div v-else>
            <div 
              v-for="comment in approvedComments" 
              :key="comment.id" 
              class="comment-item"
            >
              <p class="comment-date">{{ formatDate(comment.date) }}</p>
              <p class="comment-text">{{ comment.comment }}</p>
              <p class="comment-author">— {{ comment.username }}</p>
            </div>
          </div>
        </div>
        <!-- 添加新评论（可选） -->
        <div class="add-comment-section">
          <h3>添加评论</h3>
          <textarea v-model="newComment" placeholder="请输入您的评论"></textarea>
          <button @click="submitComment" class="submit-comment-button">提交</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
import { BASE_URL } from '@/config.js';
export default {
  name: 'News',
  props: {
    isLoggedIn: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    userIsLoggedIn() {
      return this.isLoggedIn;
    }
  },
  data() {
    return {
      // 当前选中的标签
      currentTab: 'forum', // 'forum' 或 'myPosts'

      // 论坛相关
      forumNewsItems: [],
      forumPage: 1,
      forumHasMoreItems: true,
      sortByForum: 'date',

      // 我的帖子相关
      myPostsItems: [],
      myPostsPage: 1,
      myPostsHasMoreItems: true,
      sortByMyPosts: 'date',

      newNews: {
        title: '',
        summary: '',
        link: '',
        image_url: null // 用于存储图片URL
      },
      showPublishForm: false, // 控制发布表单的显示
      currentUsername: '', // 当前用户的用户名
      error: '', // 错误信息
      loading: false, // 加载状态
      userId: null, // 当前用户的ID
      hoveredItem: null, // 当前悬停的新闻ID

      // 通知消息
      message: '',
      messageType: '', // 'success' 或 'error'

      // 记录已点赞的新闻ID，防止重复点赞
      likedNewsIds: [],

      // 图片预览
      previewImage: null, // 用于存储图片预览URL

      // 用于显示选中的文件名
      selectedFileName: '未选择文件',

      // 评论模态框相关
      showCommentsModal: false,
      currentComments: [],
      currentNewsId: null,
      newComment: '',
      approvedComments: []
    };
  },
  created() {
    this.checkLoginStatus();
    this.fetchForumNews();
  },
  watch: {
    isLoggedIn(newVal) {
      if (newVal) {
        this.checkLoginStatus();
      } else {
        this.currentUsername = '';
        this.myPostsItems = [];
        this.likedNewsIds = [];
      }
    }
  },
  methods: {
    switchTab(tab) {
      this.currentTab = tab;
      if (tab === 'forum') {
        this.fetchForumNews();
      } else if (tab === 'myPosts') {
        if (this.isLoggedIn) {
          this.fetchMyPosts();
        } else {
          this.showMessage('请先注册或登录以查看您的帖子', 'error');
        }
      }
    },
    // 显示通知消息
    showMessage(msg, type) {
      this.message = msg;
      this.messageType = type;
      setTimeout(() => {
        this.message = '';
        this.messageType = '';
      }, 3000); // 3秒后自动隐藏
    },
    // 检查登录状态并获取用户信息
    async checkLoginStatus() {
      const userId = localStorage.getItem('userId');
      if (userId) {
        this.userId = userId;
        try {
          const response = await axios.get(`${BASE_URL}/api/users/${userId}`, {
            headers: { 'Cache-Control': 'no-store' } // 禁止缓存
          });
          if (response.data && response.data.username) {
            this.currentUsername = response.data.username;
            if (this.currentTab === 'myPosts') {
              this.fetchMyPosts();
            }
          } else {
            this.showMessage('无法获取当前用户信息，请稍后再试', 'error');
            console.error('无法获取当前用户信息，请稍后再试');
          }
        } catch (error) {
          this.showMessage('无法获取当前用户信息，请稍后再试', 'error');
          console.error('无法获取当前用户信息，请稍后再试', error);
        }
      } else {
        this.showMessage('用户未登录', 'error');
        console.error('用户未登录');
      }
    },
    // 论坛部分的方法
    async fetchForumNews() {
      try {
        const response = await axios.get(
          `${BASE_URL}/api/news?page=${this.forumPage}&limit=5&sortBy=${this.sortByForum}`,
          { headers: { 'Cache-Control': 'no-store' } } // 禁止缓存
        );
        const { data } = response.data;
        this.forumNewsItems = data.filter(item => item.flag === 1); // 只显示审核通过的新闻
        this.forumHasMoreItems = data.length === 5;
      } catch (error) {
        console.error('获取论坛新闻失败:', error);
        this.showMessage('加载论坛新闻时出错，请稍后再试！', 'error');
      }
    },
    refreshForumNews() {
      this.forumPage = 1;
      this.fetchForumNews();
      this.scrollToTop();
    },
    async changeForumPage(newPage) {
      if (newPage < 1) return;
      this.forumPage = newPage;
      await this.fetchForumNews();
      this.scrollToTop();
    },

    // 我的帖子部分的方法
    async fetchMyPosts() {
      if (!this.isLoggedIn) {
        this.showMessage('请先注册或登录以查看您的帖子', 'error');
        return;
      }
      if (!this.userId) {
        this.showMessage('无法获取当前用户信息，请稍后再试', 'error');
        return;
      }
      try {
        const response = await axios.get(
          `${BASE_URL}/api/news/myPosts?userId=${this.userId}&page=${this.myPostsPage}&limit=5&sortBy=${this.sortByMyPosts}`,
          { headers: { 'Cache-Control': 'no-store' } } // 禁止缓存
        );
        const { data } = response.data;
        this.myPostsItems = data;
        this.myPostsHasMoreItems = data.length === 5;
      } catch (error) {
        console.error('获取我的帖子失败:', error);
        this.showMessage('加载您的帖子时出错，请稍后再试！', 'error');
      }
    },
    refreshMyPosts() {
      this.myPostsPage = 1;
      this.fetchMyPosts();
      this.scrollToTop();
    },
    async changeMyPostsPage(newPage) {
      if (newPage < 1) return;
      this.myPostsPage = newPage;
      await this.fetchMyPosts();
      this.scrollToTop();
    },
    handlePublishClick() {
      if (this.isLoggedIn) {
        this.showPublishForm = true;
      } else {
        this.showMessage('请先注册或登录以使用此功能', 'error');
      }
    },
    cancelPublish() {
      this.showPublishForm = false;
      // 清空表单
      this.newNews.title = '';
      this.newNews.summary = '';
      this.newNews.link = '';
      this.newNews.image_url = null;
      this.previewImage = null;
      // 重置文件输入
      if (this.$refs.imageInput) {
        this.$refs.imageInput.value = '';
      }
    },
      // 触发文件选择窗口
      triggerFileInput() {
      this.$refs.imageInput.click();
    },
    // 处理图片选择
    async handleImageSelection(event) {
      const file = event.target.files[0];
      if (file && file.type.startsWith('image/')) {
        this.selectedFileName = file.name; // 更新选中文件名
        try {
          // 创建FormData对象
          const formData = new FormData();
          formData.append('image', file);

          // 上传图片
          const uploadResponse = await axios.post(`${BASE_URL}/api/news_images_upload`, formData, {
            headers: {
              'Content-Type': 'multipart/form-data',
              'Cache-Control': 'no-store'
            }
          });

          // 设置image_url
          this.newNews.image_url = `${BASE_URL}${uploadResponse.data.imageUrl}`;

          // 设置图片预览
          this.previewImage = uploadResponse.data.imageUrl;

          this.showMessage('图片上传成功！', 'success');
        } catch (error) {
          console.error('图片上传失败:', error);
          this.showMessage('图片上传失败，请稍后再试！', 'error');
          this.newNews.image_url = null;
          this.previewImage = null;
          this.selectedFileName = '未选择文件';
        }
      } else {
        this.showMessage('请选择有效的图片文件', 'error');
        this.selectedFileName = '未选择文件';
      }
    },
    // 移除已选图片
    removeImage() {
      this.newNews.image_url = null;
      this.previewImage = null;
      this.selectedFileName = '未选择文件';
      if (this.$refs.imageInput) {
        this.$refs.imageInput.value = '';
      }
    },
    async submitNews() {
      const userId = this.userId;
      if (!userId) {
        this.showMessage('请先登录！', 'error');
        return;
      }
      if (!this.newNews.title || !this.newNews.summary) {
        this.showMessage('请填写标题和内容', 'error');
        return;
      }

      try {
        const response = await axios.post(`${BASE_URL}/api/news/submit`, {
          userId: userId,
          title: this.newNews.title,
          summary: this.newNews.summary, // summary 对应 "内容"
          link: this.newNews.link || '',
          image_url: this.newNews.image_url || null
        }, {
          headers: {
            'Content-Type': 'application/json',
            'Cache-Control': 'no-store'
          }
        });
        this.showMessage('帖子发布成功！', 'success');
        // 清空表单
        this.newNews.title = '';
        this.newNews.summary = '';
        this.newNews.link = '';
        this.newNews.image_url = null;
        this.previewImage = null;
        // 重置文件输入
        if (this.$refs.imageInput) {
          this.$refs.imageInput.value = '';
        }
        // 关闭发布表单
        this.showPublishForm = false;
        // 刷新我的帖子列表
        this.refreshMyPosts();
      } catch (error) {
        console.error('发布帖子失败:', error);
        this.showMessage('发布帖子失败，请稍后再试！', 'error');
      }
    },

    // 删除帖子
    async deletePost(newsId) {
      if (!confirm('确定要删除这条帖子吗？')) return;
      try {
        const response = await axios.delete(`${BASE_URL}/api/news/${newsId}`, {
          data: { userId: this.userId },
          headers: { 'Cache-Control': 'no-store' } // 禁止缓存
        });
        console.log('删除响应:', response.data); // 调试信息
        if (response.data.success) {
          // 立即从数组中移除帖子，触发 transition-group 的离场动画
          this.myPostsItems = this.myPostsItems.filter(post => post.id !== newsId);
          this.showMessage('帖子删除成功！', 'success');
        } else {
          this.showMessage(response.data.error || '删除失败，请稍后再试。', 'error');
        }
      } catch (error) {
        console.error('删除帖子失败:', error);
        this.showMessage('删除帖子时出错，请稍后再试。', 'error');
      }
    },

    // 公共方法
    truncateSummary(summary) {
      return summary.length > 150 ? summary.slice(0, 150) + '...' : summary;
    },
    formatDate(dateString) {
      const options = { year: 'numeric', month: 'long', day: 'numeric', hour: '2-digit', minute: '2-digit' };
      return new Date(dateString).toLocaleDateString('zh-CN', options);
    },
    checkLoginAndExecute(func) {
      if (this.isLoggedIn) {
        func();
      } else {
        this.showMessage('请先注册或登录以使用此功能', 'error');
      }
    },
    async likeNews(newsItem) {
      const userId = this.userId;
      if (!userId) {
        this.showMessage('请先登录！', 'error');
        return;
      }

      // 检查是否已点赞
      if (this.likedNewsIds.includes(newsItem.id)) {
        this.showMessage('您已经点赞过了！', 'error');
        return;
      }

      // 乐观更新：立即增加点赞数
      newsItem.likes += 1;
      this.likedNewsIds.push(newsItem.id);
      this.showMessage('点赞成功！', 'success');

      try {
        const response = await axios.post(`${BASE_URL}/api/news/${newsItem.id}/like`, { userId }, {
          headers: { 'Cache-Control': 'no-store' } // 禁止缓存
        });
        
        console.log('点赞响应:', response.data);
        
        // 根据实际的服务器响应调整条件
        // 假设服务器返回 { success: true, updatedLikes: 10 }
        if (!response.data.success) {
          // 服务器返回失败，撤销点赞数的增加
          newsItem.likes -= 1;
          this.likedNewsIds = this.likedNewsIds.filter(id => id !== newsItem.id);
          this.showMessage(response.data.error || '点赞失败，请稍后再试！', 'error');
        } else {
          // 如果服务器返回更新后的点赞数，可以选择更新前端显示
          if (response.data.updatedLikes !== undefined) {
            newsItem.likes = response.data.updatedLikes;
          }
          // 可选：根据需要更新已点赞的状态
        }
      } catch (error) {
        console.error('点赞失败:', error);
        // 请求失败，撤销点赞数的增加
        newsItem.likes -= 1;
        this.likedNewsIds = this.likedNewsIds.filter(id => id !== newsItem.id);
        this.showMessage('点赞失败，请稍后再试！', 'error');
      }
    },
    async favoriteNews(newsId) {
      const userId = this.userId;
      if (!userId) {
        this.showMessage('请先登录！', 'error');
        return;
      }
      try {
        await axios.post(`${BASE_URL}/api/news/${newsId}/favorite`, { userId }, {
          headers: { 'Cache-Control': 'no-store' } // 禁止缓存
        });
        this.showMessage('收藏成功！', 'success');
      } catch (error) {
        console.error('收藏失败:', error);
        this.showMessage('该新闻已收藏，请勿重复点击', 'error');
      }
    },
    // 获取新闻状态对应的类
    statusClass(flag) {
      switch(flag) {
        case 0:
          return 'status-pending';
        case 1:
          return 'status-approved';
        case -1:
          return 'status-rejected';
        default:
          return '';
      }
    },
    // 获取新闻状态对应的文本
    statusText(flag) {
      switch(flag) {
        case 0:
          return '待审核';
        case 1:
          return '审核通过';
        case -1:
          return '审核失败';
        default:
          return '';
      }
    },
    // 获取新闻状态对应的图标
    statusIcon(flag) {
      switch(flag) {
        case 0:
          return 'fas fa-hourglass-half';
        case 1:
          return 'fas fa-check-circle';
        case -1:
          return 'fas fa-times-circle';
        default:
          return '';
      }
    },
    // 新增方法：滚动到顶部
    scrollToTop() {
      // 使用 Vue 的 $nextTick 确保 DOM 更新完成后滚动
      this.$nextTick(() => {
        window.scrollTo({
          top: 0,
          behavior: 'smooth'
        });
      });
    },

    /**
     * 评论相关方法
     */

    // 打开评论模态框
    async openCommentsModal(newsItem) {
      this.currentNewsId = newsItem.id;
      this.showCommentsModal = true;
      this.approvedComments = []; // 清空之前的评论

      try {
        const response = await axios.get(`${BASE_URL}/api/news/${newsItem.id}/comments`, {
          headers: { 'Cache-Control': 'no-store' }
        });

        if (response.data && response.data.comments) {
          // 只显示审核通过的评论
          this.approvedComments = response.data.comments.filter(comment => comment.flag === 1);
        } else {
          this.approvedComments = [];
        }
      } catch (error) {
        console.error('获取评论失败:', error);
        this.showMessage('加载评论时出错，请稍后再试！', 'error');
      }
    },

    // 关闭评论模态框
    closeCommentsModal() {
      this.showCommentsModal = false;
      this.currentComments = [];
      this.currentNewsId = null;
      this.newComment = '';
      this.approvedComments = [];
    },

    // 提交新评论
    async submitComment() {
      if (!this.isLoggedIn) {
        this.showMessage('请先登录以发表评论', 'error');
        return;
      }

      if (!this.newComment.trim()) {
        this.showMessage('评论内容不能为空', 'error');
        return;
      }

      try {
        // 发送请求到后端添加评论
        const response = await axios.post(`${BASE_URL}/api/news/${this.currentNewsId}/comments`, {
          userId: this.userId,
          comment: this.newComment.trim()
        }, {
          headers: { 'Cache-Control': 'no-store' }
        });

        this.showMessage('评论已提交，等待审核', 'success');
        this.newComment = '';

        // 可选：刷新评论列表
        await this.openCommentsModal({ id: this.currentNewsId });
      } catch (error) {
        console.error('提交评论失败:', error);
        this.showMessage('提交评论失败，请稍后再试', 'error');
      }
    }
  },
};
</script>


<style scoped>
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap');
@import '@fortawesome/fontawesome-free/css/all.css';
 /* 确保Font Awesome被正确引入 */

.body {
  background-image: url('@/assets/s1.jpg'); 
  background-repeat: no-repeat; /* 背景图不重复 */
  background-size: cover; /* 背景图覆盖整个区域 */
  background-position: center; /* 背景图居中 */
  background-attachment: fixed; /* 背景图固定 */
  margin: 0;
  padding: 0;
  min-height: 100vh; /* 确保背景图覆盖整个视口高度 */
}

/* 顶部导航样式 */
.header-tabs {
  display: flex;
  justify-content: center;
  margin-top: 100px; /* 修改为 100px */
  gap: 40px; /* 根据您的示例调整间距 */
}

.tab {
  padding: 10px 20px;
  cursor: pointer;
  font-size: 1.8em;
  position: relative;
  transition: color 0.3s;
  font-weight: bold;
  color: #8b4513;
}

.tab::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -5px;
  transform: translateX(-50%);
  width: 0%;
  height: 3px;
  background-color: #cd853f;
  transition: width 0.3s;
}

.tab:hover {
  color: #cd853f;
}

.tab:hover::after {
  width: 100%;
}

.tab.active {
  color: #cd853f;
}

.tab.active::after {
  width: 100%;
}

/* 通知消息样式 */
.message {
  position: fixed;
  top: 150px; /* 根据顶部导航的位置调整 */
  right: 20px;
  padding: 15px 25px;
  border-radius: 5px;
  z-index: 1000;
  font-size: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.message.success {
  background-color: #28a745;
  color: #fff;
}

.message.error {
  background-color: #dc3545;
  color: #fff;
}

/* 其余样式保持不变 */

.news-submit-form {
  width: 90%;
  max-width: 800px;
  margin: 20px auto;
  padding: 20px;
  background: rgba(45, 45, 45, 0.9);
  border: 1px solid rgba(212, 175, 55, 0.2);
  box-shadow: 0 0 10px rgba(0,0,0,0.1); /* 轻微阴影增加立体感 */
  border-radius: 8px;
}

.news-submit-form h2 {
  color: #f5e4c3;
  text-align: center;
  margin-bottom: 20px;
  font-size: 24px;
  letter-spacing: 1px;
}

.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
  color: #ffffff; /* 标签使用白色 */
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #8b6f4e; /* 与边框颜色一致 */
  border-radius: 4px;
  background-color: #ded3c8; /* 较浅的古铜色背景 */
  color:  #6c511d; 
  font-size: 16px;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #bf9a6d; /* 聚焦时边框颜色加深 */
}

.submit-button1,
.cancel-button1 {
  display: inline-block;
  padding: 10px 20px;
  margin-right: 10px;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.button-container {
  text-align: center; /* 水平居中按钮 */
  margin-top: 30px; /* 与上方内容保持一定间距 */
}

.submit-button1 {
  background-color: #dab691; /* 主按钮使用更深的古铜色 */
  color: #55433b; /* 深棕色文字 */
}

.submit-button1:hover {
  background-color: #bf9a6d; /* 鼠标悬停时颜色加深 */
}

.cancel-button1 {
  background-color: #dab691; /* 取消按钮使用较浅的古铜色 */
  color: #55433b; /* 深棕色文字 */
}

.cancel-button1:hover {
  background-color: #bf9a6d; /* 鼠标悬停时颜色加深 */
}

.news-container {
  max-width: 800px;
  margin: 20px auto; /* 调整顶部间距为 20px */
  padding: 20px; /* 调整内边距 */
  /* background: rgba(28, 40, 39, 0.9);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5); */
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.news-header-container {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 30px;
}

.publish-button {
  background-color: #d29c66da; 
  color: #1b1313; 
  border: none;
  padding: 12px 25px;
  font-size: 16px;
  font-weight: bold;
  border-radius: 30px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(94, 75, 60, 0.5);
}

.publish-button:hover {
  background-color: #bf9a6d;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(94, 75, 60, 0.7);
}

.sort-options {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 20px;
}

.sort-options label {
  font-size: 16px;
  color: #e8c78d;
}

.sort-options select {
  margin-left: 10px;
  padding: 5px;
  border-radius: 5px;
  border: 1px solid #5e4b3c;
  background-color: #2e2e2e;
  color: #e8c78d;
}

.news-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.news-item {
  position: relative; /* 用于定位删除按钮 */
  background: rgba(45, 45, 45, 0.9);
  border: 1px solid rgba(212, 175, 55, 0.2);
  border-radius: 15px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
  margin: 20px 0; /* 上下各20px的间距 */
}

.news-content-container {
  display: flex;
  flex-direction: row;
  gap: 20px; /* 图片和内容之间的间距 */
  padding: 15px; /* 内边距，防止内容贴边 */
  background: rgba(255, 255, 255, 0.1); /* 半透明背景，提升可读性 */
  border-radius: 10px; /* 圆角 */
}

.news-image {
  width: 30%;
  max-width: 200px; /* 根据需要调整最大宽度 */
  height: auto;
  object-fit: cover;
  border-radius: 8px;
  margin: 0; /* 移除默认外边距 */
}

.news-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.delete-button {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: rgba(255, 0, 0, 0.7);
  color: white;
  border: none;
  border-radius: 50%;
  width: 35px; /* 增大按钮尺寸 */
  height: 35px;
  cursor: pointer;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease;
}

.delete-button:hover {
  background-color: rgba(255, 0, 0, 1);
}

.news-title {
  font-size: 22px;
  font-weight: 600;
  color: #f5e4c3;
  margin-bottom: 10px;
  font-family: 'Orbitron', sans-serif;
}

.news-summary {
  font-size: 16px;
  line-height: 1.6;
  color: #c1a87d;
  margin-bottom: 15px;
}

.news-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  color: #5e4b3c;
}

.status-pending {
  color: #e6b77d; /* 黄色 */
  font-weight: bold;
}

.status-approved {
  color: #28a745; /* 绿色 */
  font-weight: bold;
}

.status-rejected {
  color: #dc3545; /* 红色 */
  font-weight: bold;
}

.news-actions {
  display: flex;
  justify-content: space-between;
  padding: 10px 20px;
  border-top: 1px solid #dfe6e9;
}

.news-actions button,
.news-actions .details-button {
  background: none;
  border: none;
  color: #9c5554;
  cursor: pointer;
  font-size: 16px;
  transition: color 0.3s ease;
  text-decoration: none;
  display: flex;
  align-items: center;
}

.news-actions button i,
.news-actions .details-button i {
  margin-right: 5px;
}

.news-actions button:hover,
.news-actions .details-button:hover {
  color: #f5e4c3;
}

.like-button i::before {
  content: '👍';
}

.favorite-button i::before {
  content: '⭐';
}

.details-button::after {
  content: ' →';
}

.pagination-container {
  text-align: center;
  margin-top: 40px;
}

.pagination-btn {
  display: inline-block;
  padding: 10px 20px;
  margin-right: 10px;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  background-color: #d9b48f; /* 主按钮使用更深的古铜色 */
  color: #181616; 
}

.pagination-btn:hover:not(:disabled) {
  color: #ffffff;
  background-color: #bf9a6d;
}

.page-number {
  font-size: 16px;
  color: #e6b77dfe;
  margin: 0 10px;
}

.loading-spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 3px solid rgba(212, 175, 55, 0.3);
  border-radius: 50%;
  border-top-color: #d4af37;
  animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* 定义 fade 过渡动画 */
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s, transform 0.5s;
}
.fade-enter-from, .fade-leave-to {
  opacity: 0;
  transform: translateY(20px);
}

/* 审核状态图标样式 */
.status-approved::before {
  content: '\f00c'; /* Font Awesome 的勾选图标 */
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  margin-right: 5px;
}

.status-rejected::before {
  content: '\f00d'; /* Font Awesome 的叉号图标 */
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  margin-right: 5px;
}

.status-pending::before {
  content: '\f252'; /* Font Awesome 的沙漏图标 */
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  margin-right: 5px;
}

/* 禁用点赞按钮样式 */
.like-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* 自定义文件输入样式 */
.custom-file-input {
  position: relative;
  display: flex;
  align-items: center;
  margin-top: 10px;
}

.custom-file-input input[type="file"] {
  display: none;
}

.select-file-button {
  background-color: #d29c66da;
  color: #1b1313;
  border: none;
  padding: 6px 15px; /* 调小按钮的内边距 */
  font-size: 14px; /* 调小字体大小 */
  font-weight: bold;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(94, 75, 60, 0.5);
  display: flex;
  align-items: center;
}

.select-file-button i {
  margin-right: 5px;
  font-size: 14px; /* 调整图标大小 */
}

.select-file-button:hover {
  background-color: #bf9a6d;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(94, 75, 60, 0.7);
}

.file-name {
  margin-left: 15px;
  font-size: 14px;
  color: #f5e4c3;
  font-style: italic;
}

/* 图片预览容器 */
.image-preview {
  margin-top: 20px;
  position: relative;
  display: inline-block;
  border: 1px solid #8b6f4e;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}

.preview-img {
  width: 100%;
  max-width: 300px;
  height: auto;
  display: block;
}

.remove-image-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  background-color: rgba(0,0,0,0.6);
  color: white;
  border: none;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  cursor: pointer;
  font-size: 16px;
  line-height: 30px;
  text-align: center;
  padding: 0;
  transition: background-color 0.3s ease;
}

.remove-image-btn:hover {
  background-color: rgba(0,0,0,0.8);
}

/* 评论按钮样式 */
.comment-button {
  background-color: #d9b48f; /* 古铜色 */
  color: #1b1313;
  border: none;
  padding: 8px 15px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  transition: background-color 0.3s ease;
}

.comment-button i {
  margin-right: 5px;
}

/* .comment-button:hover {
  background-color: #bf9a6d;
} */

/* 模态框样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2000;
}

.modal-content {
  background: rgba(45, 45, 45, 0.9);
  width: 90%;
  max-width: 600px;
  padding: 20px;
  border-radius: 10px;
  position: relative;
  max-height: 80vh;
  overflow-y: auto;
}

.modal-content h2 {
  color: #fff1d4; /* 设置评论标题的颜色为蓝色 */
}

.modal-content h3 {
  color: #fff1d4; /* 设置添加评论标题的颜色为绿色 */
}

.close-button {
  position: absolute;
  top: 15px;
  right: 20px;
  font-size: 24px;
  cursor: pointer;
}

.comments-list {
  margin-top: 20px;
}

.comment-item {
  border-bottom: 1px solid #fff1d4;
  padding: 10px 0;
}

.comment-date {
  font-size: 12px;
  color:  #e9d2a5;
  margin-bottom: 5px;
}

.comment-text {
  font-size: 16px;
  color: #f5e4c3;
}

.comment-author {
  font-size: 14px;
  color: #e9d2a5;
  text-align: right;
  margin-top: 5px;
}

.add-comment-section {
  margin-top: 20px;
}

.add-comment-section textarea {
  width: 90%;
  height: 80px;
  padding: 10px;
  border: 1px solid #74302f;
  border-radius: 5px;
  resize: vertical;
  font-size: 14px;
}

.submit-comment-button {
  margin-top: 10px;
  background-color: #ffdcb9;
  color: #1b1313;
  border: none;
  padding: 8px 15px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.3s ease;
}

.submit-comment-button:hover {
  background-color: #bf9a6d;
}

/* 确保模态框在小屏幕上也能良好显示 */
@media (max-width: 768px) {
  .modal-content {
    width: 95%;
    padding: 15px;
  }

  .comment-button {
    padding: 6px 12px;
    font-size: 14px;
  }

  .submit-comment-button {
    padding: 6px 12px;
    font-size: 14px;
  }
}
</style>